<template>
	<!-- 省市区三级联动 -->
	<div>
	    <el-select v-model="provinceCode" clearable placeholder="请选择省"  @change="getPcode" size="mini">
	        <el-option
	          v-for="item in options1"
	          :key="item.provinceCode"
	          :label="item.provinceName"
	          :value="item.provinceCode">
	        </el-option>
	    </el-select>
	    <el-select v-model="cityCode" clearable placeholder="请选择市"  @change="getRcode" size="mini">
	        <el-option
	          v-for="item in options2"
	          :key="item.cityCode"
	          :label="item.cityName"
	          :value="item.cityCode">
	        </el-option>
	    </el-select>
	    <el-select v-model="areaCode" clearable placeholder="请选择县区"  @change="getLast" size="mini">
	        <el-option
	          v-for="item in options3"
	          :key="item.areaCode"
	          :label="item.areaName"
	          :value="item.areaCode">
	        </el-option>
	    </el-select>
	</div>
</template>

<script>
import { Province, getCity, getRegion } from '@/api/data'
export default {
	data() {
		return {
            options1:[],
            provinceCode:'',
            options2:[],
            cityCode:'',
            options3:[],
            areaCode:'',

		}
	},
	mounted: function () {
	    this.init()
	},
	methods: {
        async init() {
            try {
               let res = await Province()
               this.options1 = res.data
            } catch (e) {
                console.log(e)
            }
            
        },

        async getPcode(){
        	this.options2  = []
        	this.cityCode = ''
        	if (this.provinceCode) {
	        	try {
	               let res = await getCity(this.provinceCode)
	               this.options2 = res.data
	        	} catch(e){
	                console.log(e)
	        	}
	        }
        },

        async getRcode(){
        	this.options3  = []
        	this.areaCode = ''
        	if (this.cityCode) {
	        	try {
	               let res = await getRegion(this.cityCode)
	               this.options3 = res.data
	        	} catch(e){
	                console.log(e)
	        	}
	        }
        },
        getLast(){
        	console.log(this.provinceCode,this.cityCode,this.areaCode)
        }

	}
}
 </script>